<template>
  <div id="right">
    <el-page-header @back="$router.back()" content="天津市第一中心医院"></el-page-header>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="发卡量" name="first">
        <el-table
          :data="data"
          stripe
          highlight-current-row
          border
          :header-cell-style="{backgroundColor:'#DCDFE6',color:'#333'}"
        >
          <el-table-column fixed prop="fatime" label="发卡时间" width="200" />

          <el-table-column prop="userName" label="姓名" width="180" align="center" />
          <el-table-column prop="age" label="年龄" width="160" align="center" />
          <el-table-column prop="sex" label="性别" width="160" align="center" />
          <el-table-column prop="type" label="类型" width="80" align="center" />
          <el-table-column prop="papersNumber" label="身份证号" align="center" />
        </el-table>
        <div class="page">
          <el-pagination
            :current-page.sync="currentPage1"
            :page-size="20"
            layout="total, prev, pager, next"
            :total="78"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <div class="right"></div>
      <el-tab-pane label="用卡量" name="second">
        <el-table
          :data="data1"
          stripe
          highlight-current-row
          border
          :header-cell-style="{backgroundColor:'#DCDFE6',color:'#333'}"
        >
          <el-table-column fixed prop="fatime" label="用卡时间" width="200" />

          <el-table-column prop="userName" label="姓名" width="180" align="center" />
          <el-table-column prop="age" label="年龄" width="160" align="center" />
          <el-table-column prop="sex" label="性别" width="160" align="center" />
          <el-table-column prop="type" label="类型" width="80" align="center" />
          <el-table-column prop="papersNumber" label="身份证号" align="center" />
        </el-table>
        <div class="page">
          <el-pagination
            :current-page.sync="currentPage1"
            :page-size="20"
            layout="total, prev, pager, next"
            :total="210"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="医院报表统计" name="third"> <div class="bigClass">
          <div class="sum">
               
      <h3>总数据(截止目前)</h3>
    </div>
    <el-row :gutter="10" class="gmb">
      <el-col :span="6">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">建卡数量</div>
            <div class="icon-number">5426</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">成人数量</div>
            <div class="icon-number">4380</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">儿童数量</div>
            <div class="icon-number">1046</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">男性</div>
            <div class="icon-number">3130</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="box flex-row">
          <div class="icon-box">
            <div class="icon-title">女性</div>
            <div class="icon-number">2296</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="box gmb">
      <v-chart style="width:100%;height:200px;" :options="menzhen" autoresize />
    </div>
    <div class="box gmb">
      <v-chart style="width:100%;height:300px" :options="renqun" autoresize />
    </div>
          </div>
    </el-tab-pane>
    </el-tabs>
    <div class="bottom"></div>
  </div>
</template>
<script>
export default {
  name: "healthlist",
  data() {
    return {
          men: 0,
      women: 0,
      menzhen: {
        title: {
          text: '门诊就诊人数',
          subtext: '按小时统计'
        },
        grid: {
          top: 60,
          left: 60,
          right: 20,
          bottom: 20
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#000'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10"
          ],
          axisLabel: {
            color: '#000',
            fontSize: 14
          },
          axisLine: { show: false },
          boundaryGap: false,
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#000'
            },
            axisTick: {       //y轴刻度线
              show: false
            },
            splitLine: {     //网格线
              show: false
            },
            axisLine: { show: false },
            interval: 0
          }
        ],
        series: {
          name: '挂号人数',
          symbol: 'path://M717.664 612.195c-52.734 47.461-121.289 79.102-200.391 79.102s-147.656-31.641-205.664-79.102c-131.836 68.555-221.484 158.203-221.484 321.68l843.75 0c0-163.477-89.648-247.852-216.211-321.68zM512 628.016c131.836 0 237.305-110.742 237.305-242.578s-105.469-242.578-237.305-242.578-237.305 110.742-237.305 242.578c0 137.109 110.742 242.578 237.305 242.578z"',
          symbolSize: [20, 20],
          symbolOffset: [0, '-100%'],
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 2,
              color: "#47D8BE"
            }
          },
          label: {//默认文字显示
            show: true,
            position: 'top',
            textStyle: {
              color: '#41bba5',
              fontSize: 14
            },
            formatter: function (params) {
              return params.value + '人';
            }
          },
          itemStyle: {//默认图标颜色
            color: '#41bba5'
          },
          emphasis: {//选中后样式
            itemStyle: {
              color: '#c12e34'
            },
            label: {
              color: '#c12e34',
              fontSize: 16
            }
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#77e4d1'

              }, {
                offset: 1,
                color: '#daf1ed'
              }],
              globalCoord: false
            }
          },
          data: [
            7,
            8,
            4,
            6,
            4,
            23,
            49,
            547,
            1010,
            857,
            77
          ],
        }
      },
      renqun: {
        title: {
          text: '就诊人群分析'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        grid: {
          top: 60,
          left: 0,
          right: 20,
          bottom: 20,
          containLabel: true,

        },
        yAxis: {
          type: 'value',
          splitLine: {     //网格线
            show: false
          },
          axisLabel: {
            // formatter: function (value, index) {
            //   return value + '%';
            // },
            color: '#000',
            fontSize: 14
          },
          axisTick: {
            show: false,
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            // formatter: function (value, index) {
            //   return value + '%';
            // },
            color: '#000',
            fontSize: 14
          },
          data: [
            "0-10",
            "11-20",
            "21-30",
            "31-40",
            "41-50",
            "51-60",
            "61+"
          ]
        },
        series: {
          name: '年龄段',
          barMinWidth: 10,
          type: 'bar',
          itemStyle: {
            normal: {
              color: (params) => {
                let colors = ['#96dee8', '#3fb1e3', '#6be6c1', '#ffb248', '#fa5151', '#cb0a0a']
                return colors[params.dataIndex]
              },

            }
          },
          label: {//默认文字显示
            show: true,
            position: 'top',
            textStyle: {
              fontSize: 14
            },
            formatter: function (params) {
              return params.value + '人';
            }
          },
          data: [
            270,
            236,
            326,
            336,
            337,
            384,
            603
          ]
        }
      },
      activeName: "first",
      MobileNumber: "",
      UserName: "",
      PapersNumber: "",
      pageIndex: 1,
      dataCount: 0,
      data: [
            {
          type: "成人",
          sex: "女",
          age: "27",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "陈红",
          papersType: "身份证",
          papersNumber: "110101********8910",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "19",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "沈高懿",
          papersType: "身份证",
          papersNumber: "120101********7311",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "儿童",
          sex: "男",
          age: "5",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "越博超",
          papersType: "身份证",
          papersNumber: "120101********1016",
          mobileNumber: "181****1012",
          gender: 1,
          nation: "侗族",
          address: "南昌",
          healthCardNumber:
            "1ED0E8AE23C8ECB5B7C434F180548D91D867462EE07839CB59E1B1F34702A89E:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "31",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "马哲瀚",
          papersType: "身份证",
          papersNumber: "120101********7231",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "36",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "屠飞章",
          papersType: "身份证",
          papersNumber: "120101********9093",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "23",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "彭经亘",
          papersType: "身份证",
          papersNumber: "120101********5236",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "33",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "翟光霁",
          papersType: "身份证",
          papersNumber: "120101********863X",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "33",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "邹英叡",
          papersType: "身份证",
          papersNumber: "120101********7274",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "李承晚",
          papersType: "身份证",
          papersNumber: "120101********8816",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "女",
          age: "22"
        },
        {
          type: "成人",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "贾浩初",
          papersType: "身份证",
          papersNumber: "120101********281X",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "18"
        },
        {
          type: "成人",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "郏鹏池",
          papersType: "身份证",
          papersNumber: "120101********8234",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "19"
        },
        {
          type: "成人",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "苏圣杰",
          papersType: "身份证",
          papersNumber: "120101********5316",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "22"
        }
      ],
      data1: [
           {
          type: "成人",
          sex: "女",
          age: "22",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "王雨蕾",
          papersType: "身份证",
          papersNumber: "	110101********2279",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "19",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "汪修然",
          papersType: "身份证",
          papersNumber: "110101********9796",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "儿童",
          sex: "男",
          age: "6",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "盖景山",
          papersType: "身份证",
          papersNumber: "110101********0230",
          mobileNumber: "181****1012",
          gender: 1,
          nation: "侗族",
          address: "南昌",
          healthCardNumber:
            "1ED0E8AE23C8ECB5B7C434F180548D91D867462EE07839CB59E1B1F34702A89E:1::3602A0015"
        },
        {
          type: "儿童",
          sex: "女",
          age: "3",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "闻永长",
          papersType: "身份证",
          papersNumber: "110101********1495",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "36",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "江明智",
          papersType: "身份证",
          papersNumber: "	110101********7432",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "23",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "孔浩漫",
          papersType: "身份证",
          papersNumber: "110101********117X",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "33",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "蒙哲圣",
          papersType: "身份证",
          papersNumber: "110101********9091",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "33",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "游文华",
          papersType: "身份证",
          papersNumber: "	110101********3677",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "党奇玮",
          papersType: "身份证",
          papersNumber: "110101********1831",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "女",
          age: "22"
        },
        {
          type: "成人",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "史阳曦",
          papersType: "身份证",
          papersNumber: "110101********6392",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "18"
        },
        {
          type: "成人",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "夏兴文",
          papersType: "身份证",
          papersNumber: "110101********9112",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "19"
        },
        {
          type: "成人",
          fatime: "2018.9.18",
          registerName: "超级管理员",
          userName: "康同济",
          papersType: "身份证",
          papersNumber: "	110101********0898",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "22"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    pageGo(index) {
      this.pageIndex = index;
      this.getList();
    }
  },
  components: {},
  watch: {},
  props: {},
  computed: {},
  //组件销毁事件
  destroyed() {}
};
</script>
<style lang="" >
    .icon-box{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background-color:#fff;
  text-align: center;
}
</style>